<template>
  <el-drawer
    v-model="dialogFormVisible"
    :title="dialogTitle"
    size="1000"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="80px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item
        label="标题"
        prop="title"
        class="required label-right-align"
        label-width="120px"
      >
        <el-input
          v-model="formData.title"
          type="text"
          clearable
          :style="{ width: '300px' }"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="选择部门"
        prop="department_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-tree-select
          v-model="formData.department_id"
          :data="department"
          :default-expand-all="true"
          :expand-on-click-node="false"
          :check-strictly="true"
          style="width: 240px"
          :check-on-click-node="true"
          filterable
          :props="{ label: 'title', value: 'id' }"
        />
      </el-form-item>
      <el-form-item
        label="选择岗位"
        prop="station_id"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.station_id" style="width: 240px">
          <el-option
            v-for="item in stationOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="报告类型"
        prop="type"
        class="required label-right-align"
        label-width="120px"
      >
        <el-select v-model="formData.type" style="width: 240px">
          <el-option
            v-for="item in typeOption"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择文件"
        prop="file_id"
        class="required label-right-align"
        label-width="120px"
      >
        <div v-if="formData.file_id">
          <Document :aria-setsize="10" @click="showUpload()" />
          <el-text>{{ formData.file_name }}</el-text>
        </div>
        <div @click="showUpload()" v-else class="upload-btn">+</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="submitForm"> 提交 </el-button>
      </div>
    </template>
    <Upload
      v-if="isUpload"
      :config="{ total: 1, file_type: 'file' }"
      @returnImgs="returnImgsFunc"
      :isupload="isUpload"
      >上传文件</Upload
    >
  </el-drawer>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  defineExpose,
  defineEmits,
  onMounted,
  watch,
} from "vue";
import { ElMessage } from "element-plus";
import { addTplApi, editTplApi, getTplInfoApi } from "@/api/company/report";
import { getListAPi as getStationApi } from "@/api/company/station";
import Uediter from "@/components/UE.vue";
const dialogFormVisible = ref(false);
const stationOption = ref<any[]>([]);
const formRef = ref(null);
const dialogTitle = ref("");
const isUpload = ref(false);
defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
  classList: {
    type: Array,
    default: [] as any[],
  },
});
const formData = ref({
  id: 0,
  department_id: "",
  station_id: "",
  title: "",
  type: "",
  file_id: 0,
  file_name: "",
});
const typeOption = [
  { id: 1, title: "日报" },
  { id: 2, title: "周报" },
  { id: 3, title: "月报" },
];
const getStationOptions = () => {
  getStationApi({
    department_id: formData.value.department_id,
  }).then((res) => {
    stationOption.value = res.data;
  });
};
let firstChange = true;
watch(
  () => formData.value.department_id,
  (newVal: any) => {
    if (!firstChange) {
      formData.value.station_id = "";
    }
    firstChange = false;
    if (newVal) {
      getStationOptions();
    } else {
      stationOption.value = [];
    }
  }
);
const returnImgsFunc = (e: any) => {
  if (e !== null) {
    formData.value.file_id = e[0].file_id;
    formData.value.file_name = e[0].file_name;
  }
  isUpload.value = false;
};
const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  department_id: [
    {
      required: true,
      message: "请选择部门",
    },
  ],
  station_id: [
    {
      required: true,
      message: "请选择岗位",
    },
  ],
  file_id: [
    {
      required: true,
      message: "请上传文件",
    },
  ],
});

const emits = defineEmits(["getTable"]);
const contentChangeFunc = (e) => {
  formData.value.content = e;
};
function addSave() {
  addTplApi(formData.value)
    .then((res) => {
      ElMessage.success("添加成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function editSave() {
  editTplApi(formData.value)
    .then((res) => {
      ElMessage.success("编辑成功");
      emits("getTable");
      dialogClose();
    })
    .catch((err) => {});
}
function getInfo(id) {
  getTplInfoApi(id)
    .then((res: any) => {
      if (res.code == 1) {
        formData.value = {
          id: id,
          department_id: res.data.department_id,
          title: res.data.title,
          type: res.data.type,
          station_id: res.data.station_id,
          file_id: res.data.file_id,
          file_name: res.data.file.file_name,
        };
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {});
}

function submitForm() {
  formRef.value.validate().then(() => {
    if (formData.value.id == 0) {
      addSave();
    } else {
      editSave();
    }
  });
}
const showUpload = () => {
  isUpload.value = true;
  return false;
};
const dialogClose = () => {
  dialogFormVisible.value = false;
};

const dialogOpen = (id: number) => {
  dialogFormVisible.value = true;
  if (id > 0) {
    dialogTitle.value = "编辑考核";
    getInfo(id);
  } else {
    dialogTitle.value = "添加考核";
  }
};

const handleClose = () => {
  formRef.value.resetFields();
  formData.value = {
    id: 0,
    department_id: "",
    title: "",
    type: "",
    station_id: "",
    file_id: 0,
    file_name: "",
  };
  dialogFormVisible.value = false;
};

defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped>
.upload-btn {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  font-size: 30px;
  font-weight: bolder;
}
</style>
